<template>
  <div class="fireDetail">
    <div class="header">
      <span class="text">火点灾情信息</span>
      <span class="close" @click="closeDetail()">
        <i class="el-icon-close"></i>
      </span>
    </div>
    <div class="infoBox" v-if="detailData">
      <div class="infoItem">
        <p>
          <span>时间:</span>
          <span>{{ detailData.observeTime }}</span>
        </p>
      </div>
      <div class="infoItem">
        <p>
          <span>地名:</span>
          <span>{{ detailData.cityRegion }}</span>
        </p>
      </div>
      <div class="infoItem">
        <p>
          <span>强度:</span>
          <span>{{ detailData.intensityG || '未知' }}</span>
        </p>
      </div>
      <div class="infoItem">
        <p>
          <span>下垫面类型:</span>
          <span>{{ detailData.vegType }}</span>
        </p>
      </div>
      <div class="infoItem">
        <p>
          <span>距离:</span>
          <span>{{ detailData.distance }}</span>
        </p>
      </div>
      <div class="infoItem">
        <p>
          <span>方位角:</span>
          <span>{{ detailData.direction }}</span>
        </p>
      </div>
      <div class="infoItem">
        <p>
          <span>高程:</span>
          <span>{{ detailData.elevationAver || '未知' }}</span>
        </p>
      </div>
      <div class="infoItem">
        <p>
          <span>经度:</span>
          <span>{{ detailData.longitude.toFixed(7) }}</span>
        </p>
        <p>
          <span>纬度:</span>
          <span>{{ detailData.latitude.toFixed(7) }}</span>
        </p>
      </div>
      <div class="infoItem">
        <p>
          <span>行政编码:</span>
          <span>{{ detailData.adminCode }}</span>
        </p>
      </div>
      <div class="infoItem">
      <!-- <div class="infoItem" v-if="detailData.repeat != 0"> -->
        <p>
          <span>疑似重复次数:</span>
          <span>{{ detailData.repeat }}</span>
        </p>
      </div>
    </div>
    <div class="typeBox" v-if="detailData && detailData.gfAver">
    <!-- <div class="typeBox" v-if="detailData && detailData.gfAver"> -->
      <div class="typeItem">
        <p>
          <span>植被类型:</span>
          <span>{{ detailData.speciesType }}</span>
        </p>
      </div>
      <div class="typeItem">
        <p>
          <span>植被覆盖度(平均):</span>
          <span>{{ detailData.gfAver ? detailData.gfAver + "%" : 0 }}</span>
        </p>
      </div>
      <div class="typeItem">
        <p>
          <span>森林:</span>
          <span>{{
            detailData.forestPercent ? detailData.forestPercent + "%" : 0
          }}</span>
        </p>
        <p>
          <span>草地:</span>
          <span>{{
            detailData.lawnPercent ? detailData.lawnPercent + "%" : 0
          }}</span>
        </p>
      </div>
      <div class="typeItem">
        <p>
          <span>农田及自然植被:</span>
          <span>{{ detailData.farm ? detailData.farm + "%" : 0 }}</span>
        </p>
        <p>
          <span>灌木:</span>
          <span>{{ detailData.bush ? detailData.bush + "%" : 0 }}</span>
        </p>
      </div>
      <div class="typeItem">
        <p>
          <span>城市或荒漠:</span>
          <span>{{ detailData.city ? detailData.city + "%" : 0 }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
let circleEntity = [];//扩散波
let poiModel = [];//poi点
export default {
  name: "fireDetail",
  data() {
    return {
      detailData: null,
      radius:3,//扩散波半径km
      cityCenter:{
        "海口市":[110.198418,20.045805],
        "三亚市":[109.511709,18.252865],
        "三沙市":[112.234483,16.774644],
        "儋州市":[109.580812,19.520948],
        "五指山市":[109.516784,18.774827],
        "文昌市":[110.797473,19.544234],
        "琼海市":[110.474524,19.259112],
        "万宁市":[110.392605,18.793697],
        "东方市":[108.651829,19.095187],
        "定安县":[110.358001,19.681215],
        "屯昌县":[110.101667,19.351662],
        "澄迈县":[110.007497,19.738885],
        "临高县":[109.690508,19.912025],
        "白沙黎族自治县":[109.4429,19.221641],
        "昌江黎族自治县":[109.055783,19.298139],
        "乐东黎族自治县":[109.173384,18.750063],
        "陵水黎族自治县":[110.037553,18.506045],
        "保亭黎族苗族自治县":[109.700373,18.640156],
        "琼中黎族苗族自治县":[109.838389,19.033369]
      },
    };
  },
  props:['fireId'],
  watch:{
    fireId(val){
      this.getFireData();
    },
  },
  mounted(){
    // 获取火点详情
    this.getFireData();
  },
  methods:{
    // 关闭面板
    closeDetail(){
      this.$emit('closeDetail')
    },
    // 获取火点详情
    async getFireData(){
      let res = await axios.get(`${window.huoqingApiUrl}/task/firePointDetail`,{params: { id: this.fireId }})
      let cityLonLat = this.cityCenter[res.data.cityRegion]
      res.data.distance = (this.calcDistance(cityLonLat, [res.data.longitude, res.data.latitude])).toFixed(3) + 'Km'
      res.data.direction = this.calcAngle(cityLonLat, [res.data.longitude, res.data.latitude])
      res.data.elevationAver = ''
      this.detailData = res.data;
      // 添加扩散波
      this.showCricle()
    },
    // 计算距离
    calcDistance(p1, p2){
      const distance =
        turf.distance(turf.point(p1), turf.point(p2), {
          units: "kilometers",
        }); //转换单位 米
      return distance;
    },
    calcAngle(p1, p2){
      let describe = '0';
      let num = '0';
      let angle = turf.bearing(p1, p2).toFixed(3);
      angle = parseInt(angle)
      if(angle > 0 && angle < 90){
        describe = '北偏东'
        num = angle
      } else if(angle > 90 && angle < 180){
        describe = '东偏南'
        num = angle - 90
      } else if (angle < 0 && angle > -90){
        describe = '北偏西'
        num = Math.abs(angle)
      } else if (angle < -90 && angle > -180){
        describe = '西偏南'
        num = Math.abs(angle + 90)
      }
      return `${describe}${num}°`
    },
    // 扩散波
    showCricle(){
      if(circleEntity) this.hideCircle();
      // if(this.radius <= 0) return;
      let data = {
        id:this.detailData.id,
        imageUrl:'/images/fireReport/ripple.png',
        lon:this.detailData.longitude,
        lat:this.detailData.latitude,
        height:0,
        minR:100,
        maxR:this.radius * 1000,
        deviationR:this.radius * 10,
      }
      let r1 = data.minR, r2=data.minR
      function changeR1() {
        r1 = r1 + data.deviationR
        if(r1 >= data.maxR){
          r1 = data.minR
        }
        return r1;
      }
      function changeR2 () {
        return r1
      }
      circleEntity = viewer.entities.add({
        name: "",
        // id: data.id,
        position: Cesium.Cartesian3.fromDegrees(data.lon,data.lat,data.height),
        ellipse: {
          semiMinorAxis: data.maxR,
          semiMajorAxis: data.maxR,
          // semiMinorAxis: new Cesium.CallbackProperty(changeR2,false),
          // semiMajorAxis: new Cesium.CallbackProperty(changeR1,false),
          height: data.height,
          material: new Cesium.ImageMaterialProperty({
            // image: data.imageUrl,
            repeat: new Cesium.Cartesian2(1.0, 1.0),
            transparent: true,
            color: Cesium.Color.RED.withAlpha(0.2),
            // color: new Cesium.CallbackProperty(function () {
            //   return Cesium.Color.WHITE.withAlpha(1.7-r1/data.maxR)  //entity的颜色透明 并不影响材质，并且 entity也会透明哦
            // },false)
          })
        }
      })
      // 添加poi点
      this.showPOI(data)
    },
    // 清除扩散波
    hideCircle(){
      viewer.entities.remove(circleEntity);
      circleEntity = null;
    },
    // 渲染POI点
    async showPOI(data){
      let params = { lon:data.lon, lat:data.lat, radius:data.maxR };
      let poiRes = await axios.get(`${window.huoqingApiUrl}/api/poi-point/nearby`,{ params: params});
      // this.selectOptions = poiRes
      // 每次更新数据，清除之前的实体
      this.hidePOI()
      poiModel = [];
      //添加标记
      for (let item of poiRes.data) {
        let entity = viewer.entities.add({
          name: item.ppType,
          id: item.ppId, 
          position: Cesium.Cartesian3.fromDegrees(item.ppLon, item.ppLat),
          billboard: {
            image: `./images/fireReport/poi/${item.ppGroup}_${item.ppType}.png`,
            scale: 0.8,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            scaleByDistance: new Cesium.NearFarScalar(10000, 1, 100000, .7),
            disableDepthTestDistance : Number.POSITIVE_INFINITY,
            width:30,
            height:30
          },
          entityType:"poi",
          poiType:item.ppType
        });
        poiModel.push(entity);
      }
      // this.poiFormated = this.calPoiNum(poiRes)
      // console.log(this.poiFormated)
    },
    // 清除POI点
    hidePOI(){
      for (var i = 0; i < poiModel.length; i++) {
        viewer.entities.remove(poiModel[i]);
      }
      poiModel = [];
    },
  },
  beforeUnmount(){
    this.hideCircle();
    this.hidePOI();
    // if(handler3D){
    //   handler3D.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
    //   handler3D = null;
    // }
  },
};
</script>

<style lang="stylus" scoped>
.fireDetail {
  position: fixed;
  top: 50px;
  right: 390px;
  width: 260px;
  max-height: 500px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  .header{
    display: flex;
    justify-content: space-between;
    .text{
      color:#00e5fd;
      font-size: 18px;
    }
    .close{
      cursor: pointer;
    }
  }
  .infoBox, .typeBox{
    padding-bottom: 10px;
    border-bottom: 2px dotted #0c4f55;
    .infoItem, .typeItem{
      display: flex;
      justify-content: space-between;
      p{
        line-height: 30px;
        color:#fff;
        font-size: 14px;
        span:first-child{
          color:rgba(109,204,188,1);
          margin-right: 5px;
        }
      }
    }
  }
  .typeBox{
    border-bottom: 0;
  }
}
</style>